<template>
	<view class="fatai-container">
		<view class="room-list">
			<view v-if="loading" class="loading">加载中...</view>
			<view v-else-if="roomList.length === 0" class="no-data">暂无发台请求</view>
			<view v-else class="room-item" v-for="(item, index) in roomList" :key="index">
				<view class="room-info">
					<view class="room-header">
						<text class="room-id">房间号：{{ item.area }}</text>
						<text class="room-name">房间名：{{ item.purpose || '暂无' }}</text>
					</view>
					<view class="room-details">
						<text class="detail-item">订房人：{{ item.bookerName || '暂无' }}</text>
						<text class="detail-item">开始时间：{{ formatDate(item.startTime) }}</text>
						<text class="detail-item">结束时间：{{ formatDate(item.endTime) }}</text>
					</view>
				</view>
				<button class="confirm-btn" @click="showConfirmDialog(item)">确认发台</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { listRoom } from '@/api/system/room'
	import { updateRoom } from '@/api/system/room'
	
	export default {
		data() {
			return {
				roomList: [],
				loading: false,
				allRooms: [] // 存储所有房间数据
			}
		},
		onLoad() {
			this.getRoomList()
		},
		methods: {
			// 获取房间列表
			async getRoomList() {
				this.loading = true
				try {
					const res = await listRoom()
					if (res.code === 200) {
						this.allRooms = res.rows
						// 筛选出发台中的房间
						this.roomList = this.allRooms.filter(room => room.status === 'fataizhong')
					} else {
						this.$modal.msgError(res.msg || '获取房间列表失败')
					}
				} catch (error) {
					console.error('获取房间列表失败:', error)
					this.$modal.msgError('获取数据失败')
				} finally {
					this.loading = false
				}
			},
			
			// 显示确认弹窗
			showConfirmDialog(room) {
				uni.showModal({
					title: '确认发台',
					content: `是否确认房间 ${room.area} 的发台请求？`,
					success: (res) => {
						if (res.confirm) {
							this.confirmFatai(room)
						}
					}
				})
			},
			
			// 确认发台
			async confirmFatai(room) {
				try {
					const roomData = {
						...room,
						status: 'inuse'
					}
					
					const res = await updateRoom(roomData)
					if (res.code === 200) {
						this.$modal.msgSuccess('确认发台成功')
						// 更新本地数据
						const index = this.allRooms.findIndex(item => item.id === room.id)
						if (index !== -1) {
							this.allRooms[index].status = 'inuse'
							// 重新筛选列表
							this.roomList = this.allRooms.filter(room => room.status === 'fataizhong')
						}
					} else {
						this.$modal.msgError(res.msg || '确认发台失败')
					}
				} catch (error) {
					console.error('确认发台失败:', error)
					this.$modal.msgError('确认发台失败')
				}
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '暂无'
				const date = new Date(dateStr)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
			}
		}
	}
</script>

<style lang="scss" scoped>
.fatai-container {
	padding: 20rpx;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.room-list {
	.room-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		
		.room-info {
			margin-bottom: 20rpx;
			
			.room-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				.room-id {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.room-name {
					font-size: 32rpx;
					color: #666;
				}
			}
			
			.room-details {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				
				.detail-item {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		
		.confirm-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #67C23A;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: none;
			
			&:active {
				background-color: #85ce61;
			}
		}
	}
}

.loading, .no-data {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 28rpx;
}
</style>
